<template>
  <div class="disaster-intro-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="intro-header-card">
          <div class="intro-header">
            <h1>灾害类型介绍</h1>
            <p>了解各种灾害类型的特点、影响和应对措施，提高灾害防范意识</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="disaster-cards">
      <!-- 地震 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="disaster-card">
          <div class="disaster-icon earthquake">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M512 128c212.1 0 384 171.9 384 384s-171.9 384-384 384-384-171.9-384-384 171.9-384 384-384m0-64c-247.4 0-448 200.6-448 448s200.6 448 448 448 448-200.6 448-448-200.6-448-448-448z"
                fill="currentColor"
              />
              <path
                d="M320 320h384v64H320zM320 448h256v64H320zM320 576h128v64H320zM704 576h-128v256h128z"
                fill="currentColor"
              />
              <path
                d="M512 640h64v192h-64zM672 768h64v64h-64zM480 800h-64v-64h-64v128h128z"
                fill="currentColor"
              />
            </svg>
          </div>
          <h2>地震</h2>
          <div class="disaster-content">
            <p>地震是地壳快速释放能量过程中产生的地面振动。地震可能导致建筑物倒塌、山体滑坡、海啸等次生灾害。</p>
            <h3>主要特点</h3>
            <ul>
              <li>突发性强，难以精确预测</li>
              <li>破坏范围广，影响深远</li>
              <li>可能引发次生灾害</li>
            </ul>
            <h3>应对措施</h3>
            <ul>
              <li>室内：躲在坚固家具下，远离窗户和外墙</li>
              <li>室外：远离建筑物、电线杆和树木</li>
              <li>震后：谨慎移动，注意余震</li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <!-- 洪水 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="disaster-card">
          <div class="disaster-icon flood">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M512 128c-211.2 0-384 172.8-384 384s172.8 384 384 384 384-172.8 384-384-172.8-384-384-384z m0 704c-176 0-320-144-320-320s144-320 320-320 320 144 320 320-144 320-320 320z"
                fill="currentColor"
              />
              <path
                d="M320 448c0-17.6 14.4-32 32-32s32 14.4 32 32c0 17.6-32 64-32 64s-32-46.4-32-64zM448 384c0-17.6 14.4-32 32-32s32 14.4 32 32c0 17.6-32 64-32 64s-32-46.4-32-64zM576 448c0-17.6 14.4-32 32-32s32 14.4 32 32c0 17.6-32 64-32 64s-32-46.4-32-64zM384 576c0-17.6 14.4-32 32-32s32 14.4 32 32c0 17.6-32 64-32 64s-32-46.4-32-64zM512 512c0-17.6 14.4-32 32-32s32 14.4 32 32c0 17.6-32 64-32 64s-32-46.4-32-64zM640 576c0-17.6 14.4-32 32-32s32 14.4 32 32c0 17.6-32 64-32 64s-32-46.4-32-64z"
                fill="currentColor"
              />
              <path
                d="M320 704h384v64H320z"
                fill="currentColor"
              />
            </svg>
          </div>
          <h2>洪水</h2>
          <div class="disaster-content">
            <p>洪水是指江河湖泊水位暴涨，超过警戒水位或堤防高度，河水漫溢泛滥成灾的现象。</p>
            <h3>主要特点</h3>
            <ul>
              <li>季节性强，多发生在雨季</li>
              <li>持续时间长，影响范围广</li>
              <li>可能引发水污染、疫病传播</li>
            </ul>
            <h3>应对措施</h3>
            <ul>
              <li>及时转移到高地或避难场所</li>
              <li>切断电源，防止触电</li>
              <li>储备饮用水和食物</li>
              <li>避免涉水行走，防止被水冲走</li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <!-- 地面塌陷 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="disaster-card">
          <div class="disaster-icon sinkhole">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M512 128c212.1 0 384 171.9 384 384s-171.9 384-384 384-384-171.9-384-384 171.9-384 384-384m0-64c-247.4 0-448 200.6-448 448s200.6 448 448 448 448-200.6 448-448-200.6-448-448-448z"
                fill="currentColor"
              />
              <path
                d="M512 320c-105.9 0-192 86.1-192 192s86.1 192 192 192 192-86.1 192-192-86.1-192-192-192z"
                fill="currentColor"
              />
              <path
                d="M320 512h384v64H320z"
                fill="currentColor"
              />
              <path
                d="M480 320h64v384h-64z"
                fill="currentColor"
              />
            </svg>
          </div>
          <h2>地面塌陷</h2>
          <div class="disaster-content">
            <p>地面塌陷是指地表突然下沉形成的坑洞，通常由地下水抽取、矿产开采、岩溶地貌或地下空洞坍塌等原因引起。</p>
            <h3>主要特点</h3>
            <ul>
              <li>突发性强，预兆不明显</li>
              <li>形成速度快，危害严重</li>
              <li>可能导致建筑物倒塌和人员伤亡</li>
            </ul>
            <h3>应对措施</h3>
            <ul>
              <li>发现地面异常裂缝应立即撤离</li>
              <li>远离已发生塌陷的区域边缘</li>
              <li>不要靠近或进入塌陷坑洞</li>
              <li>及时向相关部门报告塌陷情况</li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <!-- 泥石流 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="disaster-card">
          <div class="disaster-icon mudslide">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M928 444.8l-560-322.4c-19.2-12.8-44.8-6.4-57.6 12.8-12.8 19.2-6.4 44.8 12.8 57.6l560 322.4c19.2 12.8 44.8 6.4 57.6-12.8 6.4-19.2 0-44.8-12.8-57.6z"
                fill="currentColor"
              />
              <path
                d="M928 633.6l-560-322.4c-19.2-12.8-44.8-6.4-57.6 12.8-12.8 19.2-6.4 44.8 12.8 57.6l560 322.4c19.2 12.8 44.8 6.4 57.6-12.8 6.4-19.2 0-44.8-12.8-57.6z"
                fill="currentColor"
              />
              <path
                d="M320 822.4l-256-147.2c-19.2-12.8-44.8-6.4-57.6 12.8-12.8 19.2-6.4 44.8 12.8 57.6l256 147.2c19.2 12.8 44.8 6.4 57.6-12.8 6.4-19.2 0-44.8-12.8-57.6z"
                fill="currentColor"
              />
              <path
                d="M384 889.6c-12.8-19.2-38.4-25.6-57.6-12.8l-256 147.2c-19.2 12.8-25.6 38.4-12.8 57.6 12.8 19.2 38.4 25.6 57.6 12.8l256-147.2c19.2-12.8 25.6-38.4 12.8-57.6z"
                fill="currentColor"
              />
            </svg>
          </div>
          <h2>泥石流</h2>
          <div class="disaster-content">
            <p>泥石流是由暴雨、冰雪融化等因素引发的含有大量泥沙石块的特殊洪流，具有较强的冲击力和破坏力。</p>
            <h3>主要特点</h3>
            <ul>
              <li>突发性强，预警时间短</li>
              <li>流速快，冲击力大</li>
              <li>多发生在山区，特别是暴雨后</li>
            </ul>
            <h3>应对措施</h3>
            <ul>
              <li>远离山沟、河道等危险区域</li>
              <li>听从当地政府疏散指令</li>
              <li>向泥石流流向的垂直方向逃生</li>
              <li>爬上高处，避开泥石流主流道</li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <!-- 台风 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="disaster-card">
          <div class="disaster-icon typhoon">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M507.4 208c-141.2 0-256 114.8-256 256 0 141.2 114.8 256 256 256 141.2 0 256-114.8 256-256 0-141.2-114.8-256-256-256z m0 448c-105.8 0-192-86.2-192-192s86.2-192 192-192 192 86.2 192 192-86.2 192-192 192z"
                fill="currentColor"
              />
              <path
                d="M507.4 96c-203 0-368 165-368 368s165 368 368 368 368-165 368-368-165-368-368-368z m0 672c-167.6 0-304-136.4-304-304s136.4-304 304-304 304 136.4 304 304-136.4 304-304 304z"
                fill="currentColor"
              />
              <path
                d="M507.4 320c-79.4 0-144 64.6-144 144s64.6 144 144 144 144-64.6 144-144-64.6-144-144-144z m0 224c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z"
                fill="currentColor"
              />
            </svg>
          </div>
          <h2>台风</h2>
          <div class="disaster-content">
            <p>台风是发生在热带或副热带洋面上的强烈热带气旋，伴随着狂风、暴雨、风暴潮等灾害性天气。</p>
            <h3>主要特点</h3>
            <ul>
              <li>风力强大，持续时间长</li>
              <li>伴随暴雨，可能引发洪水</li>
              <li>沿海地区可能出现风暴潮</li>
            </ul>
            <h3>应对措施</h3>
            <ul>
              <li>关闭门窗，加固易被风吹动的物品</li>
              <li>储备饮用水和食物</li>
              <li>避免外出，特别是台风中心经过时</li>
              <li>远离广告牌、电线杆等不稳固物体</li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <!-- 其他灾害 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
        <el-card class="disaster-card">
          <div class="disaster-icon other">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                fill="currentColor"
              />
              <path
                d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 448c-17.7 0-32 14.3-32 32v256c0 17.7 14.3 32 32 32s32-14.3 32-32V480c0-17.7-14.3-32-32-32z"
                fill="currentColor"
              />
            </svg>
          </div>
          <h2>其他灾害</h2>
          <div class="disaster-content">
            <p>除了常见的自然灾害外，还有许多其他类型的灾害，如旱灾、雪灾、冰雹、沙尘暴、海啸等。</p>
            <h3>主要特点</h3>
            <ul>
              <li>种类多样，成因复杂</li>
              <li>影响范围和程度各不相同</li>
              <li>可能与气候变化有关</li>
            </ul>
            <h3>应对措施</h3>
            <ul>
              <li>了解当地常见灾害类型</li>
              <li>关注气象预警信息</li>
              <li>制定家庭应急预案</li>
              <li>储备必要的应急物资</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 无需额外的脚本逻辑
</script>

<style lang="scss" scoped>
.disaster-intro-container {
  padding: 20px;
}

.intro-header-card {
  margin-bottom: 20px;
}

.intro-header {
  text-align: center;
  padding: 20px 0;

  h1 {
    font-size: 28px;
    color: #303133;
    margin-bottom: 15px;
  }

  p {
    font-size: 16px;
    color: #606266;
    max-width: 600px;
    margin: 0 auto;
  }
}

.disaster-cards {
  margin-top: 20px;
}

.disaster-card {
  height: 100%;
  margin-bottom: 20px;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  h2 {
    font-size: 20px;
    color: #303133;
    margin: 15px 0;
    text-align: center;
  }
}

.disaster-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 15px;

  svg {
    width: 100%;
    height: 100%;
  }

  &.earthquake {
    background-color: rgba(245, 108, 108, 0.1);
    color: #f56c6c;
  }

  &.flood {
    background-color: rgba(64, 158, 255, 0.1);
    color: #409eff;
  }

  &.sinkhole {
    background-color: rgba(121, 85, 72, 0.1);
    color: #795548;
  }

  &.mudslide {
    background-color: rgba(103, 194, 58, 0.1);
    color: #67c23a;
  }

  &.typhoon {
    background-color: rgba(144, 147, 153, 0.1);
    color: #909399;
  }

  &.other {
    background-color: rgba(144, 147, 153, 0.1);
    color: #909399;
  }
}

.disaster-content {
  padding: 0 10px;

  p {
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
    margin-bottom: 15px;
  }

  h3 {
    font-size: 16px;
    color: #303133;
    margin: 15px 0 10px;
  }

  ul {
    padding-left: 20px;
    margin-bottom: 15px;

    li {
      font-size: 14px;
      color: #606266;
      line-height: 1.6;
      margin-bottom: 5px;
    }
  }
}

@media (max-width: 768px) {
  .disaster-card {
    margin-bottom: 15px;
  }
}
</style>
